<template>
  <div class="session-list">
    <!-- 🔥 移除新建对话按钮区域 -->
    <!-- <div class="new-session-section" v-if="!isLoadingSessions">
      <button class="new-session-btn" @click="createNewSession" :disabled="isLoadingSessions">
        <span class="btn-icon">➕</span>
        <span class="btn-text">新建{{ getTypeLabel(chatMode) }}</span>
      </button>
    </div> -->

    <!-- 会话列表 -->
    <div class="sessions-container">
      <!-- 加载状态显示 -->
      <div v-if="isLoadingSessions" class="sessions-loading-indicator">
        <el-icon class="is-loading"><Loading /></el-icon>
        <span>正在加载会话...</span>
      </div>

      <!-- 实际会话列表内容 (仅在非加载状态下显示) -->
      <template v-else>
        <div class="sessions-header">
          <h3 class="sessions-title">
            {{ getTypeLabel(chatMode) }}记录
            <span class="count">({{ filteredSessions.length }})</span>
          </h3>
        </div>
        
        <div class="sessions-list">
          <div
            v-for="session in filteredSessions"
            :key="session.sessionId"
            :class="['session-item', { active: activeSessionId === session.sessionId }]"
            @click="selectSession(session)"
          >
            <div class="session-icon">
              {{ getSessionIcon(session.type) }}
            </div>
            <div class="session-content">
              <div class="session-title">{{ session.title || getDefaultTitle(session.type) }}</div>
              <div class="session-meta">
                <span class="session-time">{{ formatTime(session.updatedAt) }}</span>
                <span class="session-type-badge">{{ getTypeLabel(session.type) }}</span>
              </div>
            </div>
            <div class="session-actions">
              <button class="action-btn" @click.stop="deleteSession(session)">
                🗑️
              </button>
            </div>
          </div>
        </div>
        
        <!-- 空状态 -->
        <div v-if="filteredSessions.length === 0" class="empty-state">
          <div class="empty-icon">{{ getEmptyIcon(chatMode) }}</div>
          <div class="empty-text">暂无{{ getTypeLabel(chatMode) }}记录</div>
          <!-- 🔥 移除空状态下的“开始对话”按钮 -->
          <!-- <button class="empty-action" @click="createNewSession">
            开始{{ getTypeLabel(chatMode) }}
          </button> -->
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { Loading } from '@element-plus/icons-vue' // 引入 Loading 图标

const props = defineProps({
  sessions: { type: Array, default: () => [] },
  activeSession: { type: Object, default: () => ({}) },
  activeSessionId: { type: [String, Number], default: null },
  isLoadingSessions: { 
    type: Boolean,
    default: false
  },
  chatMode: {
    type: String,
    required: true, 
    validator: (value) => ['text', 'multimodal'].includes(value) 
  }
})

// 🔥 移除 'new' emit
const emit = defineEmits(['select', 'delete'])

const typeMappings = {
  text: { label: '文本对话', icon: '💬', emptyIcon: '💭', defaultTitle: '新对话' },
  multimodal: { label: '图像对话', icon: '🖼️', emptyIcon: '🎨', defaultTitle: '图像对话' },
  image: { label: '图像对话', icon: '🖼️', emptyIcon: '🎨', defaultTitle: '图像对话' } 
};

// 根据 chatMode 过滤会话
const filteredSessions = computed(() => {
  return props.sessions.filter(session => 
    (session.type || 'text') === props.chatMode || 
    (props.chatMode === 'multimodal' && session.type === 'image') 
  )
})

// 选择会话
function selectSession(session) {
  if (props.isLoadingSessions) return;
  emit('select', { ...session, type: session.type || 'text' })
}

// 🔥 移除 createNewSession 函数
// function createNewSession() {
//   if (props.isLoadingSessions) return;
//   emit('new', { type: props.chatMode })
// }

// 删除会话
function deleteSession(session) {
  if (props.isLoadingSessions) return;
  if (confirm(`确定要删除这个${getTypeLabel(session.type || 'text')}吗？`)) {
    emit('delete', session)
  }
}

// 获取类型标签
function getTypeLabel(type) {
  return typeMappings[type]?.label || '对话'
}

// 获取会话图标 (用于每个会话项目)
function getSessionIcon(type) {
  return typeMappings[type]?.icon || '💬'
}

// 获取空状态图标 (用于空状态显示)
function getEmptyIcon(type) {
  return typeMappings[type]?.emptyIcon || '💭'
}

// 获取默认标题 (用于 session.title 为空时)
function getDefaultTitle(type) {
  return typeMappings[type]?.defaultTitle || '新对话'
}

// 格式化时间
function formatTime(dateString) {
  if (!dateString) return ''
  const date = new Date(dateString)
  const now = new Date()
  const diff = now - date
  
  if (diff < 60000) return '刚刚'
  if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`
  if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`
  return date.toLocaleDateString()
}
</script>

<style scoped>
.session-list {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
}

/* 新建对话按钮相关样式已移除 */
/* 🔥 移除 .new-session-section 及其相关样式 */
/* .new-session-section {
  padding: 16px;
}

.new-session-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  background: transparent;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.new-session-btn:hover:not(:disabled) { 
  border-color: #409eff;
  background: rgba(64, 158, 255, 0.05);
  color: #409eff;
  transform: translateY(-1px);
}

.new-session-btn:active:not(:disabled) { 
  transform: scale(0.98);
}

.new-session-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  border-color: #e5e7eb;
}

.btn-icon {
  font-size: 16px;
} */

/* 会话列表容器 */
.sessions-container {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative; 
}

/* 加载指示器样式 */
.sessions-loading-indicator {
  position: absolute; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  color: #667eea;
  font-size: 14px;
  gap: 8px;
  z-index: 10; 
}

.sessions-loading-indicator .el-icon {
  font-size: 24px; 
  animation: rotate 1.5s linear infinite; 
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


.sessions-header {
  padding: 12px 16px 8px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.sessions-title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.count {
  font-size: 12px;
  color: #9ca3af;
  font-weight: 400;
}

.sessions-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 16px 16px;
}

/* 会话项目 */
.session-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
}

.session-item:hover {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-color: #e2e8f0;
  transform: translateX(2px);
}

.session-item.active {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-color: #93c5fd;
  color: #1e40af;
}

.session-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, #3b82f6, #1d4ed8);
}

.session-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(64, 158, 255, 0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.session-item:hover .session-icon {
  background: rgba(64, 158, 255, 0.2);
  transform: scale(1.1);
}

.session-content {
  flex: 1;
  min-width: 0;
}

.session-title {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-item.active .session-title {
  color: #1e40af;
  font-weight: 600;
}

.session-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #9ca3af;
}

.session-time {
  flex-shrink: 0;
}

.session-type-badge {
  background: #f3f4f6;
  color: #6b7280;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
}

.session-item.active .session-type-badge {
  background: rgba(59, 130, 246, 0.2);
  color: #1d4ed8;
}

.session-actions {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.session-item:hover .session-actions {
  opacity: 1;
}

.action-btn {
  padding: 4px 8px;
  border: none;
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  transform: scale(1.1);
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: #9ca3af;
  flex: 1; 
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.empty-text {
  font-size: 14px;
  margin-bottom: 20px;
  color: #6b7280;
}

/* 🔥 移除 .empty-action 及其样式 */
/* .empty-action {
  padding: 8px 16px;
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.empty-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
} */

/* 滚动条样式 */
.sessions-list::-webkit-scrollbar {
  width: 4px;
}

.sessions-list::-webkit-scrollbar-track {
  background: transparent;
}

.sessions-list::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.3);
  border-radius: 2px;
}

.sessions-list::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.5);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .session-item {
    padding: 10px 12px;
  }
  
  .session-icon {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
}
</style>
